<template>
  <Timeline>
    <Timeline-item color="" v-for="i in timeLineData.slice(0, 5)" :key="i.id">
      <span class="time_zhou">{{i.time}}</span>
      <span :class='i.type' class="time_title" style="font-size:12px;">{{i.title}}</span>
      <span>
        <div class="timeLine_source">
          <div v-if="i.label">
            <span class="time_delete" v-for="j in i.label" :key='j.id'>
              <at-tag class="pri_etag" type="blue">{{j}}</at-tag>
            </span>
          </div>
          <div class="time_desc" v-html="i.info">{{i.info}}</div>
        </div>
      </span>
    </Timeline-item>
    <Timeline-item color="" v-for="i in timeLineData.slice(5, timeLineData.length)" :key="i.id" v-if="less_Show">
      <span class="time_zhou">{{i.time}}</span>
      <span class="time_title" :class='i.type' style="font-size:12px;">{{i.title}}</span>
      <span>
        <div class="timeLine_source">
          <div v-if="i.label">
            <span class="time_delete" v-for="j in i.label" :key='j.id'>
              <at-tag class="pri_etag" type="blue">{{j}}</at-tag>
            </span>
          </div>
          <div class="time_desc" v-html="i.info">{{i.info}}</div>
        </div>
      </span>
    </Timeline-item>
    <Timeline-item color="">
      <div class="timeClass" v-if="timeLineData.length>5" v-show="more_Show">
        <a style="text-align:center;color: #afb9c3;display:block" @click="pend_open(true)">更多</a>
      </div>
      <div class="timeClass" v-if="timeLineData.length>5" v-show="less_Show">
        <a style="text-align:center;color: #afb9c3;display:block" @click="pend_open(false)">收起</a>
      </div>
    </Timeline-item>
  </Timeline>
</template>
<script>
  import Timeline from './timeline/timeline'
  import TimelineItem from './timeline/timeline-item'
  // import AtTag from './timeline/tag'
  import AtTag from '../../Tag/src/index'
  export default {
    name: 'AtTimeLine',
    components: {
      Timeline,
      TimelineItem,
      AtTag
    },
    props: {
      timeLineData: {
        type: Array,
        default: function () {
          // return [{
          //   time: '2017-06-19 13:54:23',
          //   type: 'maliciouscode',
          //   title: '网络入侵',
          //   info: '爱U币带US打碎哇哈USDAU撒豆成兵不吃白吃把吧'
          // }, {
          //   time: '2017-06-19 13:54:23',
          //   type: 'c2',
          //   title: 'C&C',
          //   info: '爱U币带US打碎哇哈USDAU撒豆成兵不吃白不吃把吧'
          // }]
        }
      }
    },
    data () {
      return {
        more_Show: true,
        less_Show: false
      }
    },
    methods: {
      pend_open (bol) {
        if (bol) {
          this.more_Show = !this.more_Show
          this.less_Show = !this.less_Show
        } else {
          this.more_Show = !this.more_Show
          this.less_Show = !this.less_Show
        }
      }
    }
  }
</script>
<style scoped>
  .time_title {
    display: inline-block;
    width: 120px;
    text-align: center;
  }
  .time {
    font-size: 12px;
    font-weight: bold;
  }
  .content {
    padding-left: 5px;
  }
  .at-timeline-item {
    margin: 0 !important;
    list-style: none;
    position: relative;
  }
  .at-timeline {
    list-style: none;
    margin: 10px;
    padding: 0;
    margin-left: 25%;
  }
  .at-timeline-item-tail {
    height: 100%;
    border-left: 1px solid #e3e8ee;
    position: absolute;
    left: 9px;
    top: 0;
  }
  .at-timeline-item-content {
    padding: 1px 1px 45px 24px;
    font-size: 12px;
    position: relative;
    top: 1px;
  }
  .time_zhou {
    margin-left: -200px;
    color: #707f8e;
    font-size: 12px;
  }
  .timeLine_source {
    background-color: #f9fafc;
    margin-top: -20px;
    margin-left: 55px;
    padding: 0 0 13px 0;
    border: 1px solid #f6f7f8;
    padding: 10px 20px;
  }
  .time_desc {
    color: #707f8e;
    font-size: 12px;
  }
  .at-timeline-item-head-blue {
    border-color: #fff !important;
    color: #fff;
  }
  .at-timeline-item-head {
    width: 0px;
    height: 0px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid transparent;
    position: absolute;
  }
  .timeClass {
    width: 56px;
    height: 22px;
    border: 1px solid #f0f4f6;
    font-size: 12px;
    background-color: #fbfbfb;
    margin-left: -44px;
    line-height: 22px;
    cursor: pointer;
  }
  /*恶意代码*/
  .maliciouscode {
    color: #ee5a5a;
  }
  /*C&C*/
  .c2 {
    color: #31c39f;
  }
  /*网络入侵*/
  .net-intrusion {
    color: #5f9dff;
  }
  /*漏洞*/
  .unfix {
    color: #fec171;
  }
  .illegal_access {
    color: #7d92d4;
  }
  .illegal_outer_access {
    color: #6dd6e4;
  }
  .record {
    color: #707f8e;
  }
  .pri_etag {
    border-radius: 0px;
    height: 22px;
    padding: 0px 12px;
    font-size: 12px;
    text-align: center;
    min-width: 71px;
  }
  .time_delete{
    display: inline-block;
    margin-bottom: 10px;
  }
</style>